<ng-template
  cdk-connected-overlay
  [cdkConnectedOverlayOrigin]="cdkConnectedOverlayOrigin"
  [cdkConnectedOverlayOpen]="isOpen"
  (backdropClick)="isOpen=false"
  (positionChange)="onPositionChange($event)"
>
  <div [@fadeInOut]="startAnimation ? datepickerPosition : 'void'" [@.disabled]="!showAnimation" class="devui-date-range-wrapper">
    <d-date-range-picker
      #dateRangePicker
      [locale]="locale"
      [cssClass]="cssClass"
      [disabled]="disabled"
      [dateConverter]="dateConverter"
      [customViewTemplate]="customViewTemplate"
      [minDate]="minDate"
      [maxDate]="maxDate"
      [dateFormat]="dateFormat"
      [showTime]="showTime"
      [selectedRange]="selectedRange"
      (selectedRangeChange)="notifyValueChange($event)"
      (hide)="hide($event)"
      [(ngModel)]="_selectedRange"
    ></d-date-range-picker>
  </div>
</ng-template>
